<template>
	<view class="container">
		<view @click="openPopup()">
			<up-input :placeholder="placeholder" border="surround" v-model="_value"
				:customStyle="{ width: '83vw', pointerEvents: 'none' }" readonly></up-input>
		</view>
		<multiple-picker title="请选择" :show="selectMultiple.show" :columns="selectMultiple.columns"
			:defaultIndex="selectMultiple.index" @confirm="confirmMultiple" @cancel="selectMultiple.show = false"
			@change="changeMultiple"></multiple-picker>

	</view>
</template>

<script>
import multiplePicker from '@/components/multiple-picker-cloud/multiple-picker.vue';
export default {
	components: { multiplePicker },
	props: {
		value: {
			type: String,
			default: null
		},
		itemIndex: {
			type: Number,
			default: 0
		},
		placeholder: {
			type: String,
			default: '请输入内容'
		},
		options: {
			type: Array,
			default: () => {
				return []
			}
		},
		title: {
			type: String,
			default: null
		},
    ApplyDetailList: {
      type: Array,
      default: () => {
        return []
      }
    },
    itemId: {
      type: String,
      required: true
    },
	},
	watch: {
		_value: {
			handler(newValue) {
				let value = uni.getStorageSync('formData');
				var formItems = JSON.parse(value.formItems);
				formItems.forEach(item => {
					if (item.title == this.title) {
						item.value.push(newValue);
						uni.setStorageSync(item.id, newValue);
					}
				})
			}
		}
	},
	data() {
		return {
			form: {
				selectValue: '测试2,测试3',
				selectIndex: ["2", "3"],
			},
			selectMultiple: {
				show: false,
				index: [],
				columns: []
			},
			_value: '',
		}
	},
	onLoad() { },
  created() {
    let value = uni.getStorageSync('formData');
    let formItems = JSON.parse(value.formItems);
    formItems.forEach(item => {
      if (item.title == this.title) {
        uni.removeStorageSync(`${item.id}`);
      }
    })
    this.setechodata()
  },
	methods: {
		openPopup() {
			this.selectMultiple.columns = [];
			this.options.forEach((item, index) => {
				var data = {
					label: item,
					value: index
				}
				this.selectMultiple.columns.push(data)
			})
			this.selectMultiple.show = true;
		},
		confirmMultiple(e) {
			// console.log(e);
			let temp = [];
			e.selected.forEach(item => {
				temp.push(item.label);
			})
			this.form.selectValue = temp.toString();
			this.form.selectIndex = e.value;
			this._value = e.selected.map(item => item.label).join(',');
			this.selectMultiple.show = false;
		},
		changeMultiple(e) { },
    setechodata(){
      if (this.ApplyDetailList && this.ApplyDetailList.formData  && this.itemId)  {
        if (this.ApplyDetailList.formData.hasOwnProperty(this.itemId))  {
          const fieldValue = this.ApplyDetailList.formData[this.itemId]; 
          if (Array.isArray(fieldValue)  && fieldValue.length  > 0) {
              this._value = fieldValue.map(item => item).join(',');
          }else {
            this._value = fieldValue
          }
        }
      }
    }
	}
}
</script>

<style scoped lang="scss">
page {
	background-color: #dadbde;
}

.form {
	width: 100%;
	padding: 40rpx 30rpx;
	box-sizing: border-box;

	.item {
		width: 100%;
		padding: 20rpx 0;

		.select {
			width: 100%;
			border: 1px solid #dadbde;
			padding-top: 6px;
			padding-bottom: 6px;
			padding-left: 9px;
			padding-right: 9px;
			border-radius: 4px;
			font-size: 15px;
			box-sizing: border-box;
			color: #CCCCCC;
			line-height: 26px;

			&.selected {
				color: black;
			}
		}
	}
}
</style>
